<!--
/**
* Author: zyf
* Date: 2020-08-21 10:48
* Desc: OtherPopup 其他数据弹框
*/
-->
<template>
  <zm-popup custom-class="pay-popup" v-model="visible" mode="bottom" :closeable="closeable">
    <view class="pay-popup__content">
      <view class="fs18 b mb15">{{ payPopup.title }}</view>
      <view class="flex flex-b mb10 flex-m fs16" v-for="(item, index) in data" :key="index">
        <view class="">{{ item.key }}</view>
        <view class="pay-popup__value">{{ item.value }}</view>
      </view>
      <yy-button size="large" @click="handleClick">{{ payPopup.buttonName }}</yy-button>
    </view>
  </zm-popup>
</template>

<script>
  import ZmPopup from '@/commons/ZmPopup'
  export default {
    name: 'OtherPopup',
    props: {
      value: Boolean,
      payData: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    components: { ZmPopup },
    data() {
      return {}
    },
    computed: {
      visible: {
        set(v) {
          this.$emit('input', v)
        },
        get() {
          return this.value
        }
      },
      payPopup() {
        return (this.payData && this.payData.payPopup) || {}
      },
      type() {
        return this.payPopup.type || {}
      },

      data() {
        return this.payPopup.data || []
      },

      closeable() {
        return this.type.close + '' === '1'
      }
    },
    methods: {
      handleClick() {
        this.$emit('surePay', this.payData)
      }
    }
  }
</script>
<style lang="scss">
  .pay-popup {
    z-index: 3000 !important;
  }
  .pay-popup__content {
    padding: 30rpx;
    box-sizing: border-box;
  }
  .pay-popup__value {
    font-weight: bold;
    color: #ffa200;
  }
</style>
